import * as echarts from "echarts";

// 折线图固定配置数据
const lineChartsList = [
  {
    name: "监测值",
    color: "#FFB89C",
    number: "0",
    areaColorF: "rgba(74, 171, 211, 0.3)",
    areaColorL: "rgba(8, 16, 33, 0.3)",
    borderColor:"rgba(74, 171, 211, 0.8)"
  },
  {
    name: "压力值",
    color: "#fff",
    number: "1",
    areaColorF: "rgba(195, 178, 107, 0.3)",
    areaColorL: "rgba( 26,  32,  39, 0.3)",
    borderColor:"rgba(195, 178, 107, 0.8)"
  }
];

// dataset 字段映射
const dimensionsFieldList = ["name", "value"];

/**
 * 多折线图配置处理方法
 * @param {Object} data 传入相关数据
 * @param {String} unit 传入折线图单位
 * @returns {Object} 返回 Echarts Option 配置
 */
export const multipleLineOptionHandler = (data = [], unit = ["T/℃max", "KN"]) => {
  const seriesList = [];
  lineChartsList.forEach(item => seriesList.push(createLineChart({ ...item })));

  return {
    tooltip: {
      trigger: "axis",
      formatter: params => createTooltip(params, { unit }),
      backgroundColor: "rgba(3, 26, 47, 0.6)",
      textStyle: { color: "#fff", fontSize: 12 }
    },

    grid: {
      top: "20%",
      right: "15%",
      bottom: "0%",
      left: "4%",
      padding: "0 0 10 0",
      containLabel: true
    },

    dataset: [
      {
        dimensions: dimensionsFieldList,
        source: data[0]
      },
      {
        dimensions: dimensionsFieldList,
        source: data[1]
      }
    ],

    xAxis: [
      {
        type: "category",
        axisTick: { show: false },
        axisLabel: {
          textStyle: { fontSize: 12, color: "rgba(255, 255, 255, 0.65)" }
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed",
            color: "rgba(255, 255, 255, 0.20)"
          }
        }
      }
    ],

    yAxis: [{
      type: "value",
      name: unit,
      nameTextStyle: {
        align: "left",
        padding: [0, 0, 0, -30],
        color: "rgba(255, 255, 255, 0.65)"
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: "rgba(255, 255, 255, 0.20)"
        }
      },
      axisLabel: {
        textStyle: { fontSize: 12, color: "rgba(255, 255, 255, 0.65)" }
      }
    },
    {
      type: "value",
      name: "KN",
      position: "right",
      nameTextStyle: {
        align: "left",
        padding: [0, 0, 0, 10],
        color: "rgba(255, 255, 255, 0.65)"
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: "#ddd",
        },
      },
      axisLabel: {
        textStyle: { fontSize: 12, color: "rgba(255, 255, 255, 0.65)" }
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: "rgba(255, 255, 255, 0.20)"
        }
      },
    }
    ],
    series: seriesList
  };
};

/**
 * 创建折线图配置处理方法
 * @param {Object} options 传入相关配置数据
 * @returns {Object} 返回 Echarts Series Line Option 配置
 */
const createLineChart = (options = {}) => {
  return {
    name: options.name,
    type: "line",
    smooth: true,
    symbol: "roundRect",
    symbolSize: 1,
    symbolSize: 5,
    datasetIndex: options.number,
    yAxisIndex: options.number,
    itemStyle: {
      borderColor: "rgba(255, 255, 255, 0.2)",
      borderWidth: 5,
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        {
          offset: 0,
          color: options.borderColor
        },
        {
          offset: 1,
          color: options.borderColor
        }
      ]),
      emphasis: {
        color: "rgba(230, 126, 34, 1)"
      }
    },
    areaStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        {
          offset: 0,
          color: options.areaColorF
        },
        {
          offset: 1,
          color: options.areaColorL
        }
      ])
    }
  }

};

/**
 * 创建 Tooltip formatter 配置
 * @param {Object} params Tooltip formatter formatterParams 数据
 * @param {Object} options 传入额外相关配置数据
 * @returns {String} 返回 Tooltip formatter 配置
 */
const createTooltip = (formatterParams, options) => {
  const exitContent = []
  let sum = formatterParams.length
  let time = ""
  for (var i = 0; i < sum; i++) {
    const unit = options.unit[i];
    const [exitData] = formatterParams;
    const { marker: exitMarker, seriesName: exitSeriesName, value } = exitData;
    const { name, value: trendValue } = value;
    time = name
    exitContent.push(`${exitMarker}${trendValue} ${unit}`);
    formatterParams.shift()
  }

  return `${time}<br />${exitContent[0]}<br />${exitContent[1]}`;
};
